<template>
  <div class="dashboard-text">
    <!-- 我是测试: {{ count }} {{ $store.state.user.userInfo.name }} -->
    <!-- Eachsh -->
    <div class="ModuleNoe">
      <!-- 机构描述与今日数据 -->
      <div class="institution">
        <h3 style="text-align: left">机构概述</h3>
        <div class="content">
          <div class="left-content">
            <p class="name">西三旗分拣中心</p>
            <p class="address">地址：北京顺义区天澜综合保税区123号</p>
            <p class="duty-people">负责人：赵五金 12000023591</p>
            <el-button> 查看营业部分布 </el-button>
          </div>
          <div class="right-content">
            <div class="item">
              <div class="label">分拣中心(个)</div>
              <div class="num">1</div>
            </div>
            <div class="item">
              <div class="label">营业部(个)</div>
              <div class="num">4</div>
            </div>
            <div class="item">
              <div class="label">司机人数(个)</div>
              <div class="num">1</div>
            </div>
            <div class="item">
              <div class="label">快递员人数(个)</div>
              <div class="num">1</div>
            </div>
          </div>
        </div>
      </div>
      <div class="Data">
        <h3>
          <p>今日数据</p>
          <p class="refresh-box">2024-07-01 10:49</p>
        </h3>
        <div class="Sumju">
          <ul>
            <li>
              <div class="label">订单金额(元)</div>
              <div class="value">2,284</div>
              <div class="bottom">较昨日 +342</div>
            </li>
            <li>
              <div class="label">订单金额(元)</div>
              <div class="value">2,284</div>
              <div class="bottom">较昨日 +342</div>
            </li>
            <li>
              <div class="label">订单金额(元)</div>
              <div class="value">2,284</div>
              <div class="bottom">较昨日 +342</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="ModuleNoe">
      <!-- 待办任务与执行中任务 -->
      <div class="Data backlog">
        <h3>
          <p class="boxs">
            待办任务
            <el-tooltip
              class="tooltip item"
              effect="light"
              placement="bottom-start"
            >
              <div slot="content" class="todoTasks1">
                待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件<br />
                待派送率=待派送/(待派送+派送中+已签收+拒收) <br />
                未分配率=未分配/全部数据 <br />
                超时率=超时任务/(已完成+进行中+已取消）<br />
              </div>
              <img src="@/assets/explain.png" />
            </el-tooltip>
          </p>
          <p class="refresh-box">2024-07-01 11:31</p>
        </h3>
        <div>
          <BallChart
            id="ballChart"
            ref="ballChart"
            :data="backlogChartData"
            :x-distance="25"
          />
        </div>
        <div class="bottom-label">
          <div
            v-for="(item, index) in backlogListdata"
            :key="index"
            class="item"
            @click="handleBacklog(item.url, item.status)"
          >
            <span>{{ item.label }}</span> <span>{{ item.value }}</span>
          </div>
        </div>
      </div>
      <div class="Data backlog">
        <h3>
          <p>
            执行中任务
            <el-tooltip
              class="tooltip item"
              effect="light"
              placement="bottom-start"
            >
              <div slot="content" class="todoTasks1">
                运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消）<br />
                派送率=派送中/(待派送+派送中+已签收+拒收）<br />
              </div>
              <img src="../../assets/explain.png" />
            </el-tooltip>
          </p>
          <p class="refresh-box">2024-07-01 11:31</p>
        </h3>
        <div>
          <BallChart
            id="ballChartIng"
            ref="ballChartIng"
            :data="taskingChartData"
            :x-distance="48"
          />
        </div>
        <div class="bottom-label">
          <div
            v-for="(item, index) in taskingListData"
            :key="index"
            class="item"
            @click="handleBacklog(item.url, item.status)"
          >
            <span>{{ item.label }}</span> <span>{{ item.value }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="ModuleNoe">
      <!-- 常用功能-->
    </div>
    <div class="ModuleNoe">
      <!-- 线路管理与运输任务 -->
    </div>
    <div class="ModuleNoe">
      <!-- 订单总量与订单分布-->
    </div>
  </div>
  <!-- {{ $store.state.user.userInfo }} -->
</template>

<script>
// import { mapGetters } from 'vuex'
// import { getUserInfo } from '@/utils/auth'
import BallChart from './components/ballChart.vue'
import { dashboardData } from '@/api/common'
import { backlogListdata, taskingListData } from './static'
export default {
  name: 'Dashboard',
  components: {
    BallChart
    // LineManageChart,
    // OrderAccountChart,
    // OrderDistributeChart
  },
  data() {
    return {
      // 待办任务数据
      backlogListdata: backlogListdata,
      // 待办任务图表数据
      backlogChartData: [
        {
          value: 0
        },
        {
          value: 0
        },
        {
          value: 0
        },
        {
          value: 0
        }
      ],
      // 执行中任务初始化图表数据
      taskingChartData: [
        {
          value: 0
        },
        {
          value: 0
        }
      ],
      // 执行中任务数据
      taskingListData: taskingListData,
      // 机构概述
      organOverview: {
        organName: '',
        organAddress: '',
        principal: '',
        phone: '',
        sortingCenterNumber: '',
        agencyNumber: '',
        driverNumber: '',
        courierNumber: ''
      },
      // 今日数据
      todayData: {
        orderAmount: '',
        orderAmountChanges: '',
        orderNumber: '',
        orderNumberChanges: '',
        transportTaskNumber: '',
        transportTaskNumberChanges: ''
      },
      // 待办事项
      backlog: {
        waitingPickupNumber: '',
        waitingPickupRate: '',
        waitingDispatchNumber: '',
        waitingDispatchRate: '',
        unassignedTransportTaskNumber: '',
        unassignedTransportTaskRate: '',
        timeoutTransportTaskNumber: '',
        timeoutTransportTaskRate: ''
      },
      notTaskDataTime: '',
      taskingDataTime: '',
      todayDataTime: ''
    }
  },
  computed: {
    // ...mapGetters(['count'])
  },
  mounted() {
    this.todayDataTime = this.getCurrentTime()
    this.taskingDataTime = this.getCurrentTime()
    this.notTaskDataTime =
      this.getCurrentTime() + ' - ' + this.getAfterThreeDays()
    this.getPageData()
  },
  methods: {
    // 获取当前时间节点
    getCurrentTime() {
      var date = new Date() // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '

      var h =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      return Y + M + D + h + m
    },
    // 获取前三天时间节点
    getAfterThreeDays() {
      const date = new Date(new Date().getTime() + 172800000) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      const D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      return Y + M + D + '23' + ':' + '59'
    },
    getPageData() {
      dashboardData().then((res) => {
        console.log('res', res)
        this.organOverview = res.data.data.organOverview
        this.todayData = res.data.data.todayData
        // // 整理待办任务数据符合传参要求
        this.dealWithBacklogChartData(res.data)
        // 整理执行中任务数据符合传参要求
        this.dealWithTaskingListData(res.data)
        // 等待数据更新完成后再执行
        this.$nextTick(() => {
          this.$refs.ballChart.initial()
          this.$refs.ballChartIng.initial()
          // this.$refs.lineManageChart.initial()
          // this.$refs.orderAccountChart.initial()
          // this.$refs.orderDistributeChart.initial()
          // this.tableActionFun()
        })
      })
    },
    // 整理待办任务数据符合传参要求
    dealWithBacklogChartData(res) {
      console.log('ssssss', res)
      // 创建数组arr用于接收拼接后台返回的数据，将返回数据中的待取件、待派件、未分配运输和超时运输的数据拼接到arr中，成为一个符合echarts图表数据格式的数组
      const arr = [
        res.data.backlog.waitingPickupNumber, // 待取件数
        res.data.backlog.waitingDispatchNumber, // 待派件数
        res.data.backlog.unassignedTransportTaskNumber, // 未分配运输数
        res.data.backlog.timeoutTransportTaskNumber // 超时运输数
      ]
      // console.log('arr', arr)

      // 对backlogListdata的数据进行处理，改变其value的值让其显示正确的数据
      this.backlogListdata = this.backlogListdata.map((item, index) => {
        return Object.assign({}, item, {
          value: arr[index]
        })
      })
      // 拼接数组表示当前待办任务的比率，将云端返回的数据赋值到其中
      const backlogChartArr = [
        res.data.backlog.waitingPickupRate, // 待取件率
        res.data.backlog.waitingDispatchRate, // 待派件率
        res.data.backlog.unassignedTransportTaskRate, // 未分配运输率
        res.data.backlog.timeoutTransportTaskRate // 超时运输率
      ]
      const ColorList = ['#E15536', '#FFC257', '#FF9739', '#ECDC7E']
      const LabelColorList = ['#20232A', '#20232A', '#20232A', '#20232A']
      const OtherColorList = ['#FFE5E0', '#FFF1D9', '#FFEAD7', '#FAFADE']
      // 对backlogChartdata的数据进行处理，成为一个符合echarts图表数据格式的数组，将backlogChartArr的值拼接赋入其中
      this.backlogChartData = this.backlogChartData.map((item, index) => {
        return {
          value: backlogChartArr[index],
          color: ColorList[index],
          labelColor: LabelColorList[index],
          otherColor: OtherColorList[index]
        }
      })
      console.log('backlogChartData', this.backlogChartData)
    },
    // 整理执行中任务数据符合传参要求
    dealWithTaskingListData(res) {
      // 创建数组接收执行中任务数的数据。把云端返回的数据拼接入其中
      const taskingChartArr = [
        res.data.todayData.taskInTransitNumber, // 运输中任务数
        res.data.todayData.taskInDeliveryNumber // 派送中任务数
      ]
      const ColorList = ['#E15536', '#FFC257'] // 链群颜色值
      const LabelColorList = ['#20232A', '#20232A'] // 文本字体颜色
      const OtherColorList = ['#FFE5E0', '#FFF1D9'] // 波浪其他地方填充色
      // 改变taskingListData的数据，使其显示正确的数据
      this.taskingListData = this.taskingListData.map((item, index) => {
        return Object.assign({}, item, {
          value: taskingChartArr[index]
        })
      })
      // 创建数组接收执行中任务比率的数据。把云端返回的数据拼接入其中
      const taskingChartArrBottom = [
        res.data.todayData.taskInTransitRate, // 运输中任务比率
        res.data.todayData.taskInDeliveryRate // 派送中任务比率
      ]
      // 对taskingChartData的数据进行处理，成为一个符合echarts图表数据格式的数组，将taskingChartArrBottom的值拼接赋入其中
      this.taskingChartData = this.taskingChartData.map((item, index) => {
        return {
          value: taskingChartArrBottom[index],
          color: ColorList[index],
          labelColor: LabelColorList[index],
          otherColor: OtherColorList[index]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-text {
  margin-top: 35px;
  margin-left: 20px;
}
.ModuleNoe {
  display: flex;
  align-items: content;
  justify-content: space-between;
  margin-bottom: 20px;
  .institution {
    width: 49%;
    height: 100%;
    background: rgb(255, 255, 255);
    padding: 23px 20px;
    h3 {
      margin-top: 0;
      font-size: 16px;
      color: #20232a;
      font-weight: 700;
    }
    .content {
      position: relative;
      display: flex;
      .left-content {
        padding-left: 10px;
        flex: 50%;
        border-right: 1px solid #ebeef5;
        .name {
          font-size: 16px;
          margin-top: 20px;
          margin-bottom: 13px;
        }
        .address {
          margin-bottom: 8px;
        }
        .duty-people {
          margin-bottom: 23px;
        }
        .address,
        .duty-people {
          font-size: 14px;
          color: #818693;
        }
        .search-sales-department {
          font-size: 14px;
          color: #e15536;
          width: 158px;
          height: 40px;
          background: #ffeeeb;
          border: 1px solid #f3917c;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .btn {
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .btn::before {
            content: '';
            width: 20px;
            height: 20px;
            display: block;
            background-image: url('../../assets/position.png');
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }
      .right-content {
        display: flex;
        flex: 50%;
        width: 300px;
        flex-wrap: wrap;
        .item {
          flex: 50%;
          flex-direction: column;
          align-items: center;
          display: flex;
          .label {
            font-size: 14px;
            // font-weight: bold;
            margin-bottom: 10px;
          }
          .num {
            font-size: 32px;
            font-weight: bold;
            color: #e15536;
            cursor: pointer;
          }
        }
        .item:nth-child(2) {
          padding-right: 25px;
        }
        .item:nth-child(1),
        .item:nth-child(2) {
          height: 85px;
        }
      }
    }
  }
  .todoTasks1 {
    line-height: 28px;
    color: #818693;
    font-size: 14px;
    background: white;
  }
  .tooltip {
    margin-left: 6px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
  .Data {
    width: 49%;
    background: rgb(255, 255, 255);
    padding: 6px 20px;
    h3 {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      p {
        margin-top: 0;
        font-size: 16px;
        color: #20232a;
        font-weight: 700;
      }
      //刷新部分
      .refresh-box {
        font-size: 14px;
        color: #818693;
        display: flex;
        align-items: center;
        cursor: pointer;
      }
      .refresh-box::before {
        content: '';
        display: inline-block;
        width: 15px;
        height: 14px;
        background-image: url('../../assets/refresh.png');
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 8px;
        // cursor: pointer;
      }
    }
    .Sumju {
      margin-top: 16px;
      padding-left: 10px;
      ul {
        display: flex;
        align-items: content;
        justify-content: space-between;
        li {
          .label {
            font-size: 14px;
            color: #20232a;
            margin-bottom: 21px;
          }
          .value {
            font-size: 36px;
            color: #20232a;
            font-weight: bold;
            margin-bottom: 24px;
          }
          .bottom {
            font-size: 14px;
            color: #818693;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            padding-left: 9px;
          }
          .bottom::after {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            background-image: url('../../assets/rise.png');
            background-repeat: no-repeat;
            background-size: contain;
          }
          .bottom.active::after {
            background-image: url('../../assets/down.png');
          }
          .boxs {
            .tooltip {
              img {
                width: 20px;
                height: 20px;
              }
              .bottom-label {
                cursor: pointer;
                position: absolute;
                top: 235px;
                display: flex;
                width: 100%;
                justify-content: space-around;
                padding-right: 40px;
                .item span:nth-child(1),
                .item span:nth-child(2) {
                  font-weight: bold;
                }
                .item:nth-child(1) {
                  span:nth-child(2) {
                    color: #e15536;
                  }
                }
                .item:nth-child(2) {
                  span:nth-child(2) {
                    color: #ffc257;
                  }
                }
                .item:nth-child(3) {
                  span:nth-child(2) {
                    color: #ff9739;
                  }
                }
                .item:nth-child(4) {
                  span:nth-child(2) {
                    color: #dfcb59;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.backlog {
  //待办事项
  position: relative;
  .bottom-label {
    cursor: pointer;
    position: absolute;
    top: 256px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding-right: 40px;
    .item span:nth-child(1),
    .item span:nth-child(2) {
      font-weight: bold;
    }
    .item:nth-child(1) {
      span:nth-child(2) {
        color: #e15536;
      }
    }
    .item:nth-child(2) {
      span:nth-child(2) {
        color: #ffc257;
      }
    }
    .item:nth-child(3) {
      span:nth-child(2) {
        color: #ff9739;
      }
    }
    .item:nth-child(4) {
      span:nth-child(2) {
        color: #dfcb59;
      }
    }
  }
}
</style>
